<!DOCTYPE>
<html>
<head>
    <title>jvTable Demo</title>
    <meta charset="UTF-8" />
    
    <!-- 依赖的框架引入 -->
    <script type="text/javascript" src="./src/jquery.js"></script>
    <script type="text/javascript" src="./src/vue.js"></script>

    <!-- 插件引入 -->
    <script type="text/javascript" src="jquery.vtable.js"></script>

    <!-- 使用amaze ui作展示用 -->
    <link rel="stylesheet" type="text/css" href="http://cdn.amazeui.org/amazeui/2.5.0/css/amazeui.css">
    <link rel="stylesheet" type="text/css" href="http://cdn.amazeui.org/amazeui/2.5.0/css/amazeui.min.css">
    <script type="text/javascript" src="http://cdn.amazeui.org/amazeui/2.5.0/js/amazeui.js"></script>
    <script type="text/javascript" src="http://cdn.amazeui.org/amazeui/2.5.0/js/amazeui.min.js"></script>
    <script type="text/javascript" src="http://cdn.amazeui.org/amazeui/2.5.0/js/amazeui.ie8polyfill.js"></script>
    <script type="text/javascript" src="http://cdn.amazeui.org/amazeui/2.5.0/js/amazeui.ie8polyfill.min.js"></script>
    <script type="text/javascript" src="http://cdn.amazeui.org/amazeui/2.5.0/js/amazeui.widgets.helper.js"></script>
    <script type="text/javascript" src="http://cdn.amazeui.org/amazeui/2.5.0/js/amazeui.widgets.helper.min.js"></script>
</head>
<body>
<div id="table">
    <table>
        <thead>
            <tr>
                <th v-for="column in columns">
                    {{column.name}}
                </th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="entry in data">
                <td v-for="column in columns">
                    {{entry[column['key']]}}
                </td>
            </tr>
        </tbody>
    </table>
</div>

<div id="vtable_0"></div>
<div id="vtable_1"></div>

<script type="text/javascript">
// 直接实例化Vue生成表格
var table = new Vue({
    el: '#table',
    data: {
        columns: [
            {key: 'id', name: 'id'},
            {key: 'name', name: 'name'},
            {key: 'gender', name: 'gender'}
        ],
        data: [
            {id: 0, name: 'Alice', gender: 'F', score: 90},
            {id: 1, name: 'Bob', gender: 'M', score: 85},
            {id: 2, name: 'Cart', gender: 'M', score: 95},
            {id: 3, name: 'Dickson', gender: 'M', score: 80}
        ]
    }
});

/**
 * 利用jQuery拓展生成表格
 */
var jq_vtable_0 = $('#vtable_0');
jq_vtable_0.vtable({
    classList: ['am-table', 'am-table-bordered', 'am-table-radius']
});

// 修改数据
var newData = [
    {id: 0, name: 'Ed', gender: 'F', score: 90},
    {id: 1, name: 'Frank', gender: 'M', score: 85},
    {id: 2, name: 'Gay', gender: 'M', score: 95},
    {id: 3, name: 'Hickson', gender: 'M', score: 80}
];
jq_vtable_0.setData(newData);

// 生成第二张表格
var jq_vtable_1 = $('#vtable_1');
jq_vtable_1.vtable();
</script>
</body>
</html>